﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="~/lib/jquery/dist/jquery.min.js"></script>

    <link href="//unpkg.com/layui@2.11.0/dist/css/layui.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .navbar {
            display: none;
        }

        /* 导航栏整体样式 */
        nav {
            background: linear-gradient(to bottom right, #e0f2fe, #bbdefb);
            width: 200px;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            border-right: 1px solid #e9ecef;
        }

            nav h6 {
                color: #007bff;
                padding: 10px 15px;
                margin: 0;
                font-size: 16px;
                display: flex;
                align-items: center;
            }

                nav h6::before {
                    content: "\2695";
                    margin-right: 10px;
                    font-size: 20px;
                }

            nav ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }

                nav ul li {
                    position: relative;
                }

                    nav ul li a {
                        display: block;
                        color: #495057;
                        text-decoration: none;
                        padding: 10px 15px;
                        transition: background-color 0.2s ease;
                        display: flex;
                        align-items: center;
                    }

                        nav ul li a.active {
                            background-color: #007bff;
                            color: white;
                        }

                        nav ul li a:hover {
                            background-color: #e9ecef;
                        }

                    nav ul li i {
                        margin-right: 10px;
                        color: #adb5bd;
                    }

                    nav ul li ul {
                        display: none;
                        position: relative;
                        background-color: #f8f9fa;
                        width: 100%;
                        padding-left: 20px;
                    }

    /*      .content-area {
             margin-left: 20px;
             padding: 20px;
         } */

        /* 新增顶部按钮及下拉菜单样式 */
        .top-button {
            position: fixed;
            top: 10px;
            right: 10px;
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }

        .dropdown-menu {
            display: none;
            position: fixed;
            top: 45px;
            right: 10px;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

            .dropdown-menu a {
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
            }

                .dropdown-menu a:hover {
                    background-color: #f1f1f1;
                }

        .iframe-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin-left: 200px; /* 避开左侧导航栏 */
        }
    </style>

</head>

<body>

    <nav>

        <h6>七尾医疗服务后台</h6>
        <!-- 新增顶部按钮 -->
        <button class="top-button" id="loginButton">当前登录人：[用户名]</button>
        <!-- 新增下拉菜单 -->
        <div class="dropdown-menu" id="dropdownMenu">
            <a href="#" onclick="changePassword()">修改密码</a>
            <a href="#" onclick="logout()">退出登录</a>
        </div>


        <ul id="menu"></ul>
    </nav>
    <iframe id="urlId" src="" style="width:1500px;height:1000px;">
    </iframe>
    <script src="//unpkg.com/layui@2.11.0/dist/layui.js"></script>
    <script>


        // 添加获取Cookie的函数
        function getCookie(name) {
            const value = document.cookie.split('; ').find(row => row.startsWith(`${name}=`));
            return value ? value.split('=')[1] : '';
        }
        //

        $(document).ready(function () {
            // 获取用户名并更新按钮显示
            const username = getCookie('name'); // 假设Cookie名称是'username'
            $("#loginButton").text(`当前登录人：${username || '未登录'}`); // 增加容错处理


        //显示菜单
        $(document).ready(function () {
            // 通过 AJAX 获取菜单数据
            $.ajax({
                url: `@ViewBag.BaseUrl/T5/Menu/GetMenuList`,               
                type: "get",
                dataType: "json",
                success: function (menuData) {
                    if (Array.isArray(menuData.data)) {
                        renderMenu(menuData.data, $("#menu"));
                    } else {
                        console.error('服务器返回的菜单数据不是数组格式:', menuData);
                    }
                },
                error: function (error) {
                    console.error("获取菜单数据失败:", error);
                }
            });

            // 递归渲染菜单的函数
            function renderMenu(menuItems, parentElement) {
                menuItems.forEach(function (menuItem) {
                    var listItem = $("<li>");
                    var link = $("<a>").attr("href", "#").data("url", menuItem.menuUrl || "").text(menuItem.label || "");

                    if (menuItem.icon) {
                        link.prepend("<i class='" + menuItem.icon + "'></i>");
                    }
                    listItem.append(link);

                    // 处理点击事件
                    link.on("click", function (e) {
                        e.preventDefault();
                        var url = $(this).data("url");
                        if (url) {
                            $("#urlId").attr("src", url);
                        }

                        // 处理父级菜单的点击事件，显示/隐藏子级菜单
                        var subMenu = $(this).next('ul');
                        if (subMenu.length > 0) {
                            subMenu.toggle();
                        }
                    });

                    if (menuItem.children && Array.isArray(menuItem.children) && menuItem.children.length > 0) {
                        var subMenu = $("<ul>");
                        renderMenu(menuItem.children, subMenu);
                        listItem.append(subMenu);
                    }

                    parentElement.append(listItem);
                });
            }

            // 处理顶部按钮点击事件，显示/隐藏下拉菜单
            $("#loginButton").click(function () {
                $("#dropdownMenu").toggle();
            });

            // 点击页面其他地方隐藏下拉菜单
            $(document).click(function (e) {
                if (!$(e.target).closest('#loginButton').length && !$(e.target).closest('#dropdownMenu').length) {
                    $("#dropdownMenu").hide();
                }
            });
        });

        

        });

        // 修改密码函数，可根据实际需求实现具体逻辑
        function changePassword() {
          window.location.href = '/User/UpdatePass';
        }

        // 退出登录函数，可根据实际需求实现具体逻辑
        function logout() {

        window.location.href = '@Url.Action("Login", "User")';

        }
    </script>
</body>

</html>    